<template>
  <!-- 购买记录 -->
  <div class="goodsHistory">
    <div class="chart">
      <van-card
        v-for="(item, index) in buygoods"
        :key="index"
        :desc="item.goodsList[0].content"
        :title="item.subject"
        :tag="item.goodsList[0].tag"
        :price="Number(item.goodsList[0].price).toFixed(2)"
        :origin-price="Number(item.goodsList[0].originalPrice).toFixed(2)"
        @click="goDetail(item.goodsList[0].id)"
      >
        <template #thumb>
          <div class="img_box">
            <van-swipe lazy-render>
              <van-swipe-item
                style="height:200px;"
                v-for="(items,indexs)  in   item.goodsList[0].imgList "
                :key="indexs"
                @click.stop="bigImg(index,indexs)"
                fit="contain"
              >
                <van-image :src="items" class="swip_img lostFound_Ul_li_lostFound_img">
                  <template v-slot:loading>
                    <van-loading size="20px" vertical>加载中...</van-loading>
                  </template>
                </van-image>
              </van-swipe-item>
            </van-swipe>
          </div>
        </template>
        <template #num>
          <slot name="num"></slot>
        </template>

        <template #footer>
          <van-button size="mini">实付:{{item.totalAmount}}</van-button>
          <van-button size="mini" @click="showGoods(index)">详情</van-button>
        </template>
      </van-card>
    </div>

    <van-popup
      :show="show"
      position="left"
      closeable
      close-icon="close"
      @click-overlay="showPopup"
      @click-close-icon="showPopup"
      class="popup"
    >
      <van-divider dashed>订单详情</van-divider>

      <van-row>
        <van-card
          :price="Number(buygoods[index].goodsList[0].price).toFixed(2)"
          :desc="buygoods[index].subject"
          :title="buygoods[index].goodsList[0].title"
          :thumb="buygoods[index].goodsList[0].imgList[0]"
        >
          <template #num>
            <span>
              <small>原价￥{{ buygoods[index].goodsList[0].originalPrice}}</small>
            </span>
          </template>
          <template #footer>
            {{ buygoods[index].body}}
            {{ buygoods[index].address}}
          </template>
        </van-card>
        <div>
          <p
            style="font-size:14px;"
            class="cobyOrderSn"
            :data-clipboard-text="buygoods[index].outTradeNo"
            @click="copys"
          >订单号:{{ buygoods[index].outTradeNo}}</p>
          <van-tag
            style=" float:right;"
            type="success"
            class="cobyOrderSn"
            :data-clipboard-text="buygoods[index].outTradeNo"
            @click="copys"
          >复制单号</van-tag>
        </div>
        <van-action-bar>
          <van-action-bar-button type="danger" text="再买一件" @click="payMeonyOne" />
        </van-action-bar>
      </van-row>
    </van-popup>
    <slot></slot>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import { Dialog, Toast } from 'vant'
import { copy } from '../utils/tools'
export default {
  props: {
    buygoods: {
      type: Array,
    },
  },

  data() {
    return {
      show: false,
      index: 0,
      num: 1,
    }
  },
  methods: {
    copys() {
      copy('.cobyOrderSn')
    },
    // 弹出购买商品详情
    showGoods(index) {
      this.index = index
      this.show = !this.show
    },
    showPopup() {
      this.show = !this.show
    },
    // 跳转遗失物品详情页面
    goDetail(itemId) {
      // this.$router.push('/detail/' + itemId)
    },
    payMeonyOne() {
      if (!this.$store.getters.getUserInfo) {
        this.$router.push('/login')
      } else {
        Dialog.confirm({
          title: '购物提示',
          message:
            '确认购买' +
            this.buygoods[this.index].goodsList[0].title +
            '*' +
            this.num,
        })
          .then(() => {
            // on confirm
            //  [this.ShoppingInfo.id]:1
            this.$axios
              .post(
                '/order/alipayGroup',

                JSON.stringify({
                  goodsMap: {
                    [this.buygoods[this.index].goodsList[0].id]:
                      this.num.toString(),
                  },
                  address: this.buygoods[this.index].address,
                  userId: this.$store.getters.getUserInfo.id.toString(),
                })
              )
              .then((resp) => {
                // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
                const divForm = document.getElementsByTagName('div')
                if (divForm.length) {
                  document.body.removeChild(divForm[0])
                }
                const div = document.createElement('div')
                div.innerHTML = resp.data // data就是接口返回的form 表单字符串
                document.body.appendChild(div)
                document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
                document.forms[0].submit()
              })
          })
          .catch(() => {
            // on cancel
          })
      }
    },

    // 大图
    bigImg(index, indexs) {
      ImagePreview({
        images: this.buygoods[index].goodsList[0].imgList, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
    },
  },
}
</script>

<style scoped>
.img_box img {
  width: 100%;
}
.content {
  padding: 16px 16px 160px;
}
</style>
